<template>
  <div class="content_box">
    <template v-if="bgUrl">
      <div class="banner_info" :style="{ 'background-image': 'url(' + bgUrl + ')' }">
        <div class="box">
          <h2 class="data_column_name">积分排名</h2>
        </div>
      </div>
    </template>
    <!--积分主页面  -->
    <router-view />
    <platFoot />
  </div>
</template>
<script>
import platFoot from '@/components/platFoot/index';
import {
  api_GET_CMSAdvert
} from '@/extend/api/game.js';
export default {
  components: {
    platFoot
  },
  data() {
    return {
      bgUrl: ''
    };
  },
  created() {
    this.getImg();
  },
  methods: {
    // 获取图片
    getImg() {
      var that = this;
      const form = {
        orgId: WEB_CONFIG.VUE_APP_ORGID,
        positionCode: 'MEMBER_CENTER'
      };
      api_GET_CMSAdvert(form).then(res => {
        const url = res.data[0].advert_url || '';
        that.bgUrl = url ? WEB_CONFIG.VUE_APP_STATIC_FILE_RUL_CMS + '/cms/img/' + url : '';
      }).catch(error => {
        that.$message({ type: 'error', message: error.error.message });
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.content_box {
  text-align: center;
  font-size: 0px;
}
.banner_info {
  width: 1280px;
  height: 465px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  color: #fff;
  background-size: center;
  background-repeat: no-repeat;
}
.banner_info .box {
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: 18px;
  transform: translate(-50%,-50%);
  width: 50%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.data_column_name {
  font-weight: bold;
  margin: 50px 0;
  font-size: 60px;
}
</style>
